<script setup lang="ts">
import { ref } from "vue";
import { useRole } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { ArrowDown, Checked } from '@element-plus/icons-vue'

import Refresh from "~icons/ep/refresh";
import Checkbox from "~icons/ri/checkbox-fill";
import DeleteBin from "~icons/ri/delete-bin-line";
import Swap from "~icons/ri/swap-2-line";

defineOptions({
  name: "GroupCallTask"
});

const formRef = ref();
const {
  permissions,

  form,
  loading,
  columns,
  dataList,
  pagination,
  tableRef,
  multipleSelection,
  onSearch,
  resetForm,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  handleSelectionClear,
  handleCommand,
  openDialog,
  changeDel
} = useRole();
</script>

<template>
  <div class="main">
    <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
    >
      <el-form-item prop="name" v-if="permissions.is_search_name">
        <el-input
          v-model="form.name"
          placeholder="任务名称"
          clearable
          class="w-[180px]!"
        />
      </el-form-item>
      <el-form-item prop="status" v-if="permissions.is_search_status">
        <el-select
          v-model="form.status"
          placeholder="执行状态"
          clearable
          class="w-[120px]!"
        >
          <el-option label="关闭" :value="1" />
          <el-option label="创建" :value="2" />
          <el-option label="关联名单/拨打中" :value="3" />
          <el-option label="暂停" :value="5" />
          <el-option label="完成" :value="6" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri/search-line')"
          :loading="loading"
          @click="onSearch"
        >
          查询
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
          重置
        </el-button>
      </el-form-item>

      <el-form-item v-if="permissions.is_outboundTask_add">
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:add-large-line')"
          @click="openDialog()"
        >
          新增外呼任务
        </el-button>
      </el-form-item>
    </el-form>

    <PureTableBar
      title=""
      :columns="columns"
      @refresh="onSearch"
      :key="columns.length"
      @selection-change="handleSelectionChange"
    >
      <template v-slot="{ size, dynamicColumns }">
        <!-- 多选显示 -->
        <div class="multipleInner" v-if="multipleSelection.length">
          <IconifyIconOffline
            :icon="Checkbox"
            style="color: #fff;width: 18px;height: 18px;cursor: pointer;"
            @click="handleSelectionClear"
          />
          <b>已选中 {{ multipleSelection.length }} 项</b>

          <!-- <div class="multipHandle" v-if="permissions.is_batch_recycle">
            <IconifyIconOffline :icon="Swap" />
            <p>回收未接</p>
          </div> -->

          <div class="multipHandle" v-if="permissions.is_batch_delete" @click="changeDel()">
            <IconifyIconOffline :icon="DeleteBin" />
            <p>删除</p>
          </div>
        </div>
        <pure-table
          ref="tableRef"
          align-whole="center"
          showOverflowTooltip
          table-layout="auto"
          :loading="loading"
          :size="size"
          adaptive
          :adaptiveConfig="{ offsetBottom: 108 }"
          :data="dataList"
          :columns="dynamicColumns"
          :pagination="{ ...pagination, size }"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
          @selection-change="handleSelectionChange"
          @page-size-change="handleSizeChange"
          @page-current-change="handleCurrentChange"
        >
          <template #operation="{ row }">
            <el-dropdown @command="handleCommand(row, $event)">
              <el-button type="primary" size="small">
                操作<el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="monitor" v-if="permissions.is_single_watch">监控</el-dropdown-item>
                  <!-- <el-dropdown-item command="recycle" v-if="permissions.is_single_recycle">回收未接</el-dropdown-item> -->
                  <el-dropdown-item command="pause" v-if="permissions.is_single_pause">暂停</el-dropdown-item>
                  <el-dropdown-item command="start" v-if="permissions.is_single_excute">开始</el-dropdown-item>
                  <el-dropdown-item divided command="delete" v-if="( row.status != 4 && row.status != 3 ) && permissions.is_batch_delete">删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 12px;
}

.main {
  margin: 12px 12px 0 !important;
}

:deep(.progress) {
  p {
    font-size: 12px;
  }
  .barInner {
    width: 140px;
    background-color: #e7e7e7;
    height: 7px;
    border-radius: 4px;
    margin: 0 auto;
    overflow: hidden;

    .bar {
      height: 7px;
      background-color: var(--pure-theme-menu-active-before);
      border-radius: 4px;
    }
  }
}

.multipleInner {
  background-color: var(--pure-theme-menu-active-before);
  height: 45px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 14px;
  color: #ffffff;

  b {
    margin-left: 3px;
    margin-right: 10px;
  }

  .multipHandle {
    padding: 5px 8px;
    margin-left: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.1s;

    svg {
      color: #ffffff;
    }

    p {
      margin-left: 3px;
    }

    &:hover {
      background-color: #ffffff;
      color: #000000;

      :deep(svg) {
        color: #000000;
      }
    }
  }
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
